$cyan: #67E5C2;
$deepCyan: #24BCB8;
$lightCyan: #C7F8EF;
$red: #EC6E69;
$lightRed: #FFE2E2;
$orange: #EC6E69;
$lightOrange: #FFEDD8;
$purple: #956BF7;
$lightPurple: #EAE1FF;
$blue: #3678FD;
$deepBlue: #4151EF;
$lightBlue: #D7EBFF;
$grey:#F4F6FA;
$grey3: #333;
$grey6: #666;
$grey9: #999;
$greyC: #ccc;
$greyE: #eee;


$ft-11: 22rpx;
$ft-13: 26rpx;
$ft-15: 30rpx;
$ft-17: 34rpx;
$ft-19: 38rpx;
$ft-24: 48rpx;

$bg-color: #F4F6FA;
$border-color:#ebedf0;
$font-color:#333;

.inline-block{
    display: inline-block;
}
.flex-block{
    display:flex;
}
.flex-no{
    display:block;
}
.flex-between{
    display:flex; justify-content: space-between;
    .content{flex:1;}
}
.flex-around{
    display:flex;justify-content: space-around;
}
//渐变色
.gradient{
    &-cyan{
        background: linear-gradient( 129deg, #70EAC1 0%, #31CBC9 100%);
    }
    &-blue{
        background: linear-gradient( 90deg, #047AF1 0%, #55A4F8 100%);   
    }
}
.c-{
    &cyan{color:$deepCyan;}
    &grey3{color:$grey3;}
    &grey6{color:$grey6;}
    &grey9{color:$grey9;}
}

.line{
    position:relative;
    &:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1rpx;background:$border-color;transform: scaleY(0.5);}
    &-top{
        position:relative;
        &:after{content:'';position:absolute;left:0;top:0;width:100%;height:1rpx;background:$border-color;transform: scaleY(0.5);}
    }
    &-left{
        position:relative;
        &:after{content:'';position:absolute;left:0;top:0;width:1rpx;height:100%;background:$border-color;transform: scaleX(0.5);}
    }
    &-right{
        position:relative;
        &:after{content:'';position:absolute;right:0;top:0;width:1rpx;height:100%;background:$border-color;transform: scaleX(0.5);}
    }
}
.ellipsis{
    &-1{
        overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
    }
    &-2{
        overflow: hidden;white-space: normal;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
    }
}
.dot{
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    min-width: 16px;
    padding: 0 3px;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
    line-height: 1.2;
    text-align: center;
    background-color: #ee0a24;
    border: 1px solid #fff;
    border-radius: 16px;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
}

.fly-textarea{
    display:flex;align-items:center;width:100%;background:#fff;padding:20rpx 30rpx;line-height:48rpx;
    .title{max-width: 180rpx;min-width: 180rpx;font-size:28rpx;}
    .text{font-size:28rpx;max-height:200rpx;overflow-y:auto;width:90%;}
    .content{flex: 1;
        .textarea{min-height:48rpx;width:90%;}
    }
}

.fly-card{ // 左右布局
    .item{display:flex;background:#fff;padding:30rpx;position:relative;width:100%;box-sizing: border-box;}
    .thumb{width:160rpx;height:160rpx;overflow:hidden;
        image{width:100%;height:100%;}
    }
    .content{flex:1;margin-left:30rpx;word-wrap:break-word;overflow:hidden;
        &:after{content:'';position:absolute;left:30rpx;bottom:0;width:calc(100% - 60rpx);height:1rpx;background:#dfe2e5;transform: scaleY(0.5);}
        .title{font-size:32rpx;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}
        .desc{color:#999;font-size:24rpx;}
        &.no-border{
            &::after{display: none;}
        }
    }
}

.fly-cell{
    display:flex;justify-content: space-between;align-items: center;background:#fff;padding:0 30rpx;
    .thumb{
        width: 90rpx;
        image{width:40rpx;height:40rpx;float:left;}
    }
    .content{
        flex:1;display: flex;justify-content: space-between;align-items:center;border-bottom:1rpx solid #dfe2e5;padding: 30rpx 0;line-height:40rpx;
    }
    .value{
        text-align:right; flex:1;
    }
    .title{
        font-size:34rpx;margin-right:30rpx;max-width:70%;
    }
    .arrow{
        background:none;
        .iconfont{font-size:34rpx;color:#ddd;}
        image{width:48rpx;height:48rpx;}
    }
    .iconfont{color:#999;}
}

.fly-panel{ // 上中下布局
    background:#fff;margin-bottom:24rpx;border-radius:18rpx;border-radius:16rpx;
    .hd{
        display:flex;align-items: top;padding:32rpx 30rpx;@extend .line;line-height:40rpx;box-sizing: border-box;
        .title{flex:1;font-size:34rpx;font-weight:bold;}
        .value{text-align:right;font-size:26rpx;color:#999;}
    }
    .bd{
        display:flex;flex:1;padding:30rpx;
    }
    
    .ft{
        padding:20rpx 32rpx;text-align:right;@extend .line-top;

    }
    &.no-border{
        .hd{
            padding-bottom:0;
            &::after{display:none;}
        }
        .ft{
            padding-top:0;
            &::after{display:none;}
        }
    }
}

.fly-title{
    font-size: 38rpx;
    font-weight: bold;
    color: $grey3;
    margin:30rpx 0;
    padding-left:30rpx;
    position:relative;
    &::before{
        content: '';position:absolute;left:0;top:50%;transform:translateY(-50%);width:8rpx;height:32rpx;background:$cyan;
    }
}

.bd-li{display:flex;justify-content: flex-start;line-height:48rpx;font-size:26rpx;width:100%;overflow:hidden;box-sizing:border-box;
    .li-label{color:#999;margin-right:30rpx;}
    .li-p{color:#333;flex:1;word-break: break-all;}
}

.ul-li{
    .li{
        position:relative;padding:10rpx 30rpx 10rpx 40rpx;color:#666;
        &:before{content:"";position:absolute;top:26rpx;left:20rpx;width:10rpx;height:10rpx;overflow:hidden;border-radius:50%;background:blue;}
    } 
}

.fly-bottom-bar{
    padding-top:146rpx;
    .content{
        position: fixed;width: 100%;bottom: var(--safe-area-inset-bottom);left:0;z-index:99;background:#fff;
    }
}